<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/myjs.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <style>
        .container {
            width: 500px;
            height: 60%;
            margin: 200px auto;
        }

        body {
            background-image: url("img/2.jpg");
            background-attachment: fixed;
        }

        #logindiv {
            text-align: right;
        }

        .confirm,
        #btnCancel,
        #btnRegist {
            display: none;
        }
    </style>
</head>
<body>
<div class="container">
    <div id="logindiv">
        <form id="userForm" action="/login" method="post">-->
            <table class="table" border="1">
                <tr>
                    <td>用户名：</td>
                    <td><input class="form-control" onblur="checkUserRepeat()" type="text" id="username" name="username" value="张仲景"></td>
                </tr>
                <tr class="confirm">
                    <td>电话：</td>
                    <td><input type="text" class="form-control" id="tel" name="tel"></td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td><input type="password" class="form-control" id="password" name="password"
                               value="123456"></td>
                </tr>
                <tr class="confirm">
                    <td>确认密码：</td>
                    <td><input type="password" class="form-control" id="password2" name="password2"></td>
                </tr>
            </table>
            <input type="submit" class="btn btn-primary" id="btnLogin" value="登录" />
            <input type="button" class="btn btn-primary" id="btnRegistShow" value="注册用户"
                   onclick="showRegist(true)" />
            <input type="button" class="btn btn-primary" id="btnRegist" value="注册" onclick="myRegist()" />
            <input type="button" class="btn btn-primary" id="btnCancel" value="取消"
                   onclick="showRegist(false)" />
        </form>
    </div>
</div>

<script>
    function showRegist(bool) {
        if (bool) {
            $('.confirm').show();
            $('#btnLogin').hide();
            $('#btnRegist').show();
            $('#btnRegistShow').hide();
            $('#btnCancel').show();
        } else {
            $('.confirm').hide();
            $('#btnLogin').show();
            $('#btnRegist').hide();
            $('#btnRegistShow').show();
            $('#btnCancel').hide();
        }
    }

    function myRegist() {
        let username = $("#username").val();
        if (username == '') {
            alert("请填入用户名！");
            return;
        }
        if(!checkUserRepeat()){
            return;
        }
        let pass1 = $("#password").val();
        let pass2 = $("#password2").val();
        if (pass1 != '' && pass2 != '' && pass1 == pass2) {
            $.post(
                "/user/userAdd",
                $("#userForm").serialize(),
                function(n) {
                    alert("注册成功");
                    showRegist(false);
                }
            );
        } else {
            alert("两次密码必须一致并且不能为空！");
        }
    }

    function checkUserRepeat(){
        let username=$("#username").val();
        $.ajax({
            url:"/user/checkUserRepeat",
            data:{username:$('#username').val()},
            syntax:false,
            success:function (n){
                if(n>0){
                    alert("用户名已存在");
                    return false;
                }
            }
            }
        );
        return true;
    }
</script>
</body>
</html>